<!--  -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="输入司机姓名"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="选择审核状态" @change="changeStatusSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="已审核" value="1"></el-option>
                    <el-option label="未审核" value="2"></el-option>
                    <el-option label="审核失败" value="3"></el-option>
                    <el-option label="证件过期" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="formInline.sfz" placeholder="输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="地区">
                <el-cascader v-model="endAddress" :props="{ checkStrictly: true }" clearable
                    :options="provinceAndCityData" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="身份证状态">
                <el-select v-model="formInline.sfzzt" placeholder="选择身份证状态" @change="changeSfzztSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="异常" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="驾驶证状态">
                <el-select v-model="formInline.jszzt" placeholder="选择驾驶证状态" @change="changeJszztSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="异常" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
        </CustomForm>

        <div class="row-info">
            <el-descriptions :column="3" border>
                <el-descriptions-item :labelStyle="labelStyle" :contentStyle="contentStyle">
                    <template slot="label">总认证数：</template>
                    {{ total }} (人)
                </el-descriptions-item>
                <el-descriptions-item :labelStyle="labelStyle" :contentStyle="{ ...contentStyle, 'color': 'red' }">
                    <template slot="label">身份证异常：</template>
                    {{ sfz }} (人)
                </el-descriptions-item>
                <el-descriptions-item :labelStyle="labelStyle" :contentStyle="{ ...contentStyle, 'color': 'red' }">
                    <template slot="label">驾驶证异常</template>
                    {{ jsz }} (人)
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <el-table :data="list" style="width: 100%" height="600" align="center" v-loading="tableLoading">
            <el-table-column prop="user_id" label="用户ID" align="center" width="80">
            </el-table-column>
            <el-table-column prop="user_name" label="司机姓名" align="center" width="100" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="mobile" label="司机手机号" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="sfz" label="身份证号" align="center" width="200">
            </el-table-column>
            <el-table-column prop="id_end_date" label="身份证期限" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.sfzend == 1" style="color:green">{{ scope.row.id_end_date }}</span>
                    <span v-else-if="scope.row.sfzend == 2" style="color: red;">{{ scope.row.id_end_date }}</span>
                    <span v-else style="color: red;">识别错误</span>
                </template>
            </el-table-column>
            <el-table-column prop="driver_end_date" label="驾驶证期限" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.drend == 1" style="color:green">{{ scope.row.driver_end_date }}</span>
                    <span v-else-if="scope.row.drend == 2" style="color: red;">{{ scope.row.driver_end_date }}</span>
                    <span v-else style="color: red;">识别错误</span>
                </template>
            </el-table-column>
            <el-table-column prop="shi" label="所属地区" align="center">
            </el-table-column>
            <el-table-column prop="add_time" label="添加时间" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1" style="color:green">通过</span>
                    <span v-else-if="scope.row.status == 2" style="color: red;">未通过</span>
                    <span v-else-if="scope.row.status == 3" style="color: red;">证件过期</span>
                    <span v-else style="color: red;">待审核</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="updatedMobile(scope.$index)">手机号</el-button>
                    <el-button v-if="scope.row.status == 1" size="mini" type="primary"
                        @click="dialogVisibleAuditing = true; getDriverDetail(scope.row.user_id)">查看</el-button>
                    <el-button v-else-if="[2, 3].includes(scope.row.status)" size="mini" type="primary"
                        @click="dialogVisibleAuditing = true; getDriverDetail(scope.row.user_id)">修改</el-button>
                    <el-button v-else size="mini" type="primary"
                        @click="dialogVisibleAuditing = true; getDriverDetail(scope.row.user_id)">审核</el-button>
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="in-page-dropdown">
                            <el-dropdown-item><el-button size="mini" type="primary"
                                    v-if="scope.row.status == 2 || scope.row.status == 3"
                                    @click="delDriver(scope.row)">删除</el-button>
                                <el-button size="mini" type="primary" v-if="scope.row.status == 1"
                                    @click="returnBackHandler(scope.row.id)">退回</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item><el-button size="mini" type="primary"
                                    @click="uploadPersonHandler(scope.row.id)">上传司机</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="审核车主信息" top="5vh" :visible.sync="dialogVisibleAuditing" width="80%">
            <AuditingDialog v-if="dialogVisibleAuditing" :form="auditingForm" @reject="auditingReject"
                @save="auditingSave">
            </AuditingDialog>
        </el-dialog>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>

        <el-dialog title="修改司机登录手机号" :visible.sync="dialogPhone" width="40%">
            <el-form ref="formPhone" :model="driverInfoForm" label-width="80px" class="mobile-dialog">
                <el-form-item label="司机姓名">
                    <el-input v-model="driverInfoForm.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="原手机号">
                    <el-input v-model="driverInfoForm.phone" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="新手机号">
                    <el-input v-model="driverInfoForm.mobile"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPhone = false">取 消</el-button>
                <el-button type="primary" @click="updateDriverCarMobile">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="请选择拒绝原因" :visible.sync="dialogReject" width="30%">
            <el-form ref="form" :model="formReject" label-width="120px">
                <el-form-item label="身份证人像页">
                    <el-select v-model="formReject.idFront" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="身份证国徽页">
                    <el-select v-model="formReject.idBack" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="驾驶证主页">
                    <el-select v-model="formReject.driverFront" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="驾驶证附页">
                    <el-select v-model="formReject.driverBack" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="驾驶证附页背面">
                    <el-select v-model="formReject.driverLicense" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="从业资格证">
                    <el-select v-model="formReject.practice" placeholder="选择错误类型">
                        <el-option label="照片不清晰" value="照片不清晰"></el-option>
                        <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
                        <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
                        <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
                        <el-option label="从业资格证要求上传姓名页和发证机关页" value="从业资格证要求上传姓名页和发证机关页"></el-option>
                        <el-option label="驾驶证证件过期" value="驾驶证证件过期"></el-option>
                        <el-option label="身份证证件过期" value="身份证证件过期"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogReject = false">取 消</el-button>
                <el-button type="primary" @click="rejectHandler">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data";
import { getCodeToText } from '@/utils/tool';
import { getDriverList, getDriverDetail, driverReview, returnBack, updateDriverCar, uploadPerson } from '@/api/shipper';
import AuditingDialog from './components/auditingDialog.vue';
import { deleteDriver } from '@/api/driver'

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        AuditingDialog
    },
    data() {
        //这里存放数据
        return {
            provinceAndCityData,
            formInline: {
                name: "",
                phone: "",
                sfz: "",
                sheng: "",
                shi: "",
                sfzzt: "",
                jszzt: "",
                time: "",
                status: "0",
            },
            endAddress: "",
            labelStyle: { "text-align": "center", "font-weight": "bold" },
            contentStyle: {
                color: "#444",
                "font-weight": "bold",
                "min-width": "200px"
            },
            list: [],
            total: 0,
            count: 0,
            sfz: 0,
            jsz: 0,
            tableLoading: false,
            page: 1,
            pageSize: 10,
            pickerDateArr: null,//日期选择绑定数组

            dialogVisibleAuditing: false,//审核dialog框控制变量
            auditingForm: {
                sfzimgz: "",
                sfzimgb: "",
                jszfz: "",
                jszfb: "",
                json1: {},
                json2: {
                    "userName": "",
                    "validFromTime": "",
                    "expiringDate": "",
                    "birthTime": "",
                    "idCardNumber": "",
                    "address": "",
                    "issueUnit": "",
                    "issueDate": "",
                    "nationality": "",
                    "approvedDrivingModel": "",
                    "sex": ""
                },
                json: {},
                jszz: "",
                cyzgz: "",
            },
            dialogPhone: false,
            driverInfoForm: {
                user_id: "",
                phone: "",
                mobile: "",
                name: ""
            },
            dialogReject: false,
            rejectId: '',
            formReject: {
                idFront: "",
                idBack: "",
                driverFront: "",
                driverBack: "",
                driverLicense: "",
                practice: ""
            }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        endAddress: {
            handler(newV, oldV) {
                if (newV && newV.length > 0) {
                    let res = getCodeToText(newV);
                    if (newV.length == 1) {
                        this.formInline.sheng = res[0];
                    } else if (newV.length == 2) {
                        if (res[0].includes('市')) {
                            this.formInline.sheng = res[0];
                            this.formInline.shi = res[0];
                        } else {
                            this.formInline.sheng = res[0];
                            this.formInline.shi = res[1];
                        }
                    }
                } else {
                    this.formInline.sheng = "";
                    this.formInline.shi = "";
                }
            }
        }
    },
    //方法集合
    methods: {
        async getDriverList() {
            this.tableLoading = true;
            let res = await getDriverList({
                ...this.formInline,
                page: this.page,
                pageSize: this.pageSize
            });
            if (res.code == 200) {
                this.list = res.data.list;
                this.total = res.data.total;
                this.count = res.data.count;
                this.sfz = res.data.sfz;
                this.jsz = res.data.jsz;
            }
            this.tableLoading = false;
        },
        async getDriverDetail(id) {
            let res = await getDriverDetail({
                id
            });
            if (res.code == 200) {
                this.auditingForm = res.res;
            }
        },
        onSubmit() {
            this.page = 1;
            this.getDriverList();
        },
        resetTable() {
            this.formInline = {
                name: "",
                phone: "",
                sfz: "",
                sheng: "",
                shi: "",
                sfzzt: "",
                jszzt: "",
                time: "",
                status: "0"
            };
            this.endAddress = [];
            this.pickerDateArr = null;
            this.page = 1;
            this.pageSize = 10;
            this.getDriverList();
        },
        changeStatusSelect(data) {//状态选择
            this.getDriverList();
        },
        changeSfzztSelect(data) {//身份证状态选择
            this.getDriverList();
        },
        changeJszztSelect(data) {//驾驶证状态选择
            this.getDriverList();
        },
        changeDatePicker(data) {//日期选择 返回数组
            if (data) {
                this.formInline.time = data.join(' - ');
            } else {
                this.formInline.time = "";
            }
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.page = 1;
            this.getDriverList();
        },
        handleCurrentChange(page) {
            this.page = page;
            this.getDriverList();
        },
        async auditingSave(data) {
            let form = {
                status: data.status,
                id: data.id,
                json: JSON.stringify(data.json),
                json1: JSON.stringify(data.json1),
                json2: JSON.stringify(data.json2),
                user_id: data.user_id,
                user_name: data.user_name,
                jszh: data.jszh,
                sfz: data.sfz,
                IssueUnit: data.IssueUnit,
                type: "1",
                driver_end_date: data.driver_end_date,
                id_end_date: data.id_end_date,

                sfzimgz: data.sfzimgz,//身份证正面
                sfzimgb: data.sfzimgb,//身份证背面
                jszz: data.jszz,//驾驶证正面
                jszfz: data.jszfz,//驾驶证附页正面
                jszfb: data.jszfb,//驾驶证附页反面
                cyzgz: data.cyzgz,//从业资格证：
            };
            let res = await driverReview(form);
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.getDriverList();
                this.dialogVisibleAuditing = false;
            } else {
                this.$message.error(res.msg);
            }
        },
        auditingReject(obj) {
            this.dialogReject = true;
            this.rejectId = obj;
        },
        async rejectHandler() {
            if (!Object.values(this.formReject).some((item) => {
                return item.length
            })) {
                this.$message.error('请至少选择一项原因');
                return;
            }
            let res = await driverReview({
                ...this.rejectId,
                ...this.formReject,
                status: 2
            })
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogReject = false;
                this.dialogVisibleAuditing = false;
                this.getDriverList();
            }
        },
        async returnBackHandler(id) {
            this.$confirm('确定退回?', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                let res = await returnBack({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getDriverList();
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {

            })
        },
        updatedMobile(index) {
            this.driverInfoForm.name = this.list[index].user_name;
            this.driverInfoForm.phone = this.list[index].mobile;
            this.driverInfoForm.user_id = this.list[index].user_id;
            this.dialogPhone = true;
        },
        async updateDriverCarMobile() {//修改司机的手机号
            if (!this.driverInfoForm.mobile) {
                this.$message.error('请输入要修改的手机号');
                return;
            }
            let res = await updateDriverCar({
                user_id: this.driverInfoForm.user_id,
                mobile: this.driverInfoForm.mobile
            });
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogPhone = false;
            } else {
                this.$message.error(res.msg)
            }
        },
        async uploadPersonHandler(id) {
            this.$confirm('确认上传信息到交管局吗？', '提示', {
                cancelButtonText: "取消",
                confirmButtonText: '确定',
                type: "warning"
            }).then(async () => {
                let res = await uploadPerson({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg);
                }
            }).catch(() => {

            })
        },
        async delDriver(row) {
            this.$confirm('确定要删除该司机吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await deleteDriver({
                    id: row.id
                })
                if (res.code == 200) {
                    this.getDriverList();
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => { });
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        if (this.$route.query) {
            if (this.$route.query.status) {
                this.formInline.status = this.$route.query.status;
            }
        }
        this.getDriverList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-pagination {
    margin-top: 20px;
}

.mobile-dialog {

    ::v-deep .el-input.is-disabled .el-input__inner {
        background-color: #fff;
        color: #333;
        cursor: default;
    }
}
</style>